<!DOCTYPE html>
<html lang="zh">

<head>

    <title>天嘉智慧云</title>
    <#include "/headerTj.html">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script src="http://webapi.amap.com/maps?v=1.4.6&key=7d90c90b1dbe8a8aab6e0d7a77123ecb&plugin=AMap.MouseTool"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
        <script src="https://cdn.bootcss.com/sockjs-client/1.0.3/sockjs.js"></script>
        <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>

        <style>
            .btn-group-justified >.btn.focus, .btn:focus, .btn:hover {
                color: white;
                text-decoration: none;
            }
            .btn-default:hover {
                color: #fff;
                background-color: #5AA7f3;
                border-color: #fff;
            }
        </style>
        </head>

<body style="overflow:scroll;overflow-x:hidden">
        <div class="container-fluid nolrpad" style="padding:0 1%;">
            <div class="row">
                <ul id="myTab" class="nav nav-pills nav-lb">
                    <li class="nobtnli"><a href="#opt" data-toggle="tab"> 沈阳项目</a></li>
                </ul>
                <div class="panel panel-default" style="padding-top:0;">
                    <div class="panel-body nopaddingtop">
                        <div id="mapcontainer"></div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading"><i class="fa fa-bars" aria-hidden="true"></i> 实时状态</div>
                    <div class="panel-body nopaddingtop" style="padding:0">
                        <table id="jqGrid" ></table>
                        <div id="jqGridPager"></div>
                    </div>
                </div>
            </div>
        </div>
    <div class="modal fade" id="runmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:850px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="disconnect()">
                        &times;
                    </button>
                    <h4 class="modal-title"><i class="fa fa-hdd-o" aria-hidden="true"></i> 车辆仪表盘</h4>
                </div>
                <div class="modal-body">
                    <div class="row" id="text">
                        <div class="col-lg-4">
                            <div class="card card-stats">
                                <div class="card-body ">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="icon-big text-center">
                                                <i class="fa fa-battery-three-quarters" style="color:#058DC7"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="numbers">
                                                <p class="card-category">剩余油量</p>
                                                <h4 class="card-title">{{model.data.oilMass}} %</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card card-stats">
                                <div class="card-body ">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="icon-big text-center" style="color:#50B432">
                                                <i class="fa fa-thermometer-full "></i>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="numbers">
                                                <p class="card-category">发动机水温</p>
                                                <h4 class="card-title">{{model.data.temp}} °C</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card card-stats">
                                <div class="card-body ">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="icon-big text-center" style="color:#DDDF00">
                                                <i class="fa fa-dashboard "></i>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="numbers">
                                                <p class="card-category">燃油消耗率</p>
                                                <h4 class="card-title">{{model.data.fuelRate}} V</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-4">

                            <div class="card card-stats">
                                <div class="card-body ">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="icon-big text-center" style="color:#24CBE5">
                                                <i class="fa fa-clock-o" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="numbers">
                                                <p class="card-category">发动机运行时间</p>
                                                <h4 class="card-title">{{model.data.EngineTime}} 分钟</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card card-stats">
                                <div class="card-body ">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="icon-big text-center" style="color:#64E572">
                                                <i class="fa fa-database" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="numbers">
                                                <p class="card-category">总计油耗</p>
                                                <h4 class="card-title">{{model.data.fuelWears}} L</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">

                            <div class="card card-stats">
                                <div class="card-body ">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="icon-big text-center" style="color:#FF9655">
                                                <i class="fa fa-text-width" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="numbers">
                                                <p class="card-category">总计里程</p>
                                                <h4 class="card-title">{{model.data.mileage}} M</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-lg-8">
                            <div id="containera"></div>
                        </div>
                    </div>

                    <div class="row" style="margin-top:10px;border-top: 1px solid #e5e5e5; padding-top:10px;">
                        <div class="col-lg-4">
                            <div id="container-speed" style="width: 250px; height: 180px; float: left"></div>
                            <div id="container-rpm" style="width: 250px; height: 180px; float: left"></div>
                        </div>
                        <div class="col-lg-4" id="ThreeJS"></div>
                        <div class="col-lg-4">
                            <div id="container-fuel" style="width: 250px; height: 180px; float: left"></div>
                            <div id="container-jiaolongspeed" style="width: 250px; height: 180px; float: left"></div>
                        </div>
                        <div class="col-lg-4">
                            <div id="container-shuiquspeed" style="width: 250px; height: 180px; float: left"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



<script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
    <script src="${request.contextPath}/statics/plugins/highcharts/highcharts.js"></script>
    <script src="${request.contextPath}/statics/plugins/highcharts/highcharts-more.js"></script>
<script src="${request.contextPath}/statics/js/wgs2mars.js"></script>
    <script src="${request.contextPath}/statics/plugins/highcharts/solid-gauge.js"></script>
    <script src="${request.contextPath}/statics/js/modules/xinpai/car_monitor.js?_${.now?long}"></script>
    <script>
        var jd = 0;



        function disconnect() {
            if(vo.odb!=null){
                vo.odb.unsubscribe();
            }
        }
    </script>
    <script type="text/javascript">
       // login('xinpai', '000000');
    </script>
</body>
</html>
